<template>
  <div id="map"></div>
</template>

<script>
import mapboxgl from 'mapbox-gl' // or "const mapboxgl = require('mapbox-gl');"
import 'mapbox-gl/dist/mapbox-gl.css'

export default {
  data() {
    return {
      along: null,
      bboxPolygon: null,
      lineString: [
        [109.502991, 29.68718],
        [108.837829, 32.969237],
        [113.567871, 37.200787],
      ],
    }
  },
  created() {
    // this.alongFn()
    // this.bboxFn()
  },
  mounted() {
    this.mapInit()
  },
  methods: {
    alongFn() {
      const line = this.turf.lineString(this.lineString)
      const options = { units: 'miles' }
      const along = this.turf.along(line, 590, options)
      this.along = along
    },
    bboxFn() {
      const line = this.turf.lineString(this.lineString)
      const bbox = this.turf.bbox(line)
      const bboxPolygon = this.turf.bboxPolygon(bbox)
      this.bboxPolygon = bboxPolygon
    },
    mapInit() {
      mapboxgl.accessToken =
        'pk.eyJ1Ijoic2FnaXQtemgiLCJhIjoiY2t0bnl5dDFnMDZ0aTJwcDNsa3N4emF1biJ9.jFO8rJJN-kvaz9vuQ0odKQ'

      const map = new mapboxgl.Map({
        container: 'map',
        center:  [113.3089, 23.0654],
        zoom: 15,
        style: 'mapbox://styles/mapbox/streets-v11',
        hash: true,
      })

      map.on('load', () => {
        map.addSource('point', {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                properties: {},
                geometry: {
                  type: 'Point',
                  coordinates:  [113.3089, 23.0654],
                },
              },
            ],
          },
        })

        map.addLayer({
          id: 'point',
          source: 'point',
          type: 'symbol',
          layout: {
            'icon-image': 'airport-15',
            'icon-rotate': ['get', 'bearing'],
            'icon-rotation-alignment': 'map',
            'icon-allow-overlap': true,
            'icon-ignore-placement': true,
          },
        })

        map.addLayer({
          id: 'point',
          source: 'point',
          type: 'circle',
          paint: { 'circle-color': 'red' },
        })
        // map.addSource('lineString', {
        //   type: 'geojson',
        //   data: {
        //     type: 'Feature',
        //     properties: {},
        //     geometry: {
        //       type: 'LineString',
        //       coordinates: this.lineString,
        //     },
        //   },
        // })
        // map.addSource('along', { type: 'geojson', data: this.along })
        // map.addSource('bbox', { type: 'geojson', data: this.bboxPolygon })

        // map.addLayer({
        //   id: 'line',
        //   type: 'line',
        //   source: 'lineString',
        //   paint: { 'line-color': 'pink', 'line-width': 5, 'line-opacity': 0.5 },
        // })
        // map.addLayer({
        //   id: 'along',
        //   type: 'circle',
        //   source: 'along',
        //   paint: { 'circle-color': 'red', 'circle-opacity': 0.5 },
        // })
        //   map.addLayer({
        //     id: 'bbox',
        //     type: 'fill',
        //     source: 'bbox',
        //     paint: { 'fill-color': 'red', 'fill-opacity': 0.2 },
        //   })
      })
    },
  },
}
</script>

<style scoped>
#map {
  width: 100vw;
  height: 100vh;
}
</style>